<template>
  <div class="app-container message-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="消息记录ID" prop="messageid">
        <el-input v-model="state.queryParams.msgid" placeholder="消息记录ID" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <!-- 按钮组件 -->
      <all-button :buttonType="['refresh', 'query']" @queryButton="handleQuery({initPageIndex: true})" @refreshButton="handleQuery({initPageIndex: true})" />
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed">
      <el-table-column align="center" prop="messageid" label="消息记录ID" min-width="60"></el-table-column>
      <el-table-column align="center" prop="messagelx" label="消息记录类型" min-width="60"></el-table-column>
      <el-table-column align="center" prop="messagetxt" label="消息记录内容" min-width="200" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" prop="messagehhid" label="关联会话id" min-width="100"></el-table-column>
      <el-table-column align="center" prop="messageqkid" label="关联潜客id" min-width="100"></el-table-column>
      <el-table-column align="center" prop="messageaccountid" label="关联账号id" min-width="60"></el-table-column>
      <el-table-column align="center" prop="messagezjs" label="消息记录内容字节数" min-width="60"></el-table-column>
      <el-table-column align="center" prop="messagereturnjz" label="消息记录内容返回节奏" min-width="60"></el-table-column>
      <el-table-column align="center" prop="messagecreatedate" label="消息记录创建时间" min-width="100"></el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup name="Message">
import useMessageManageStore from '@store/modules/messageManage'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'

const messageManageStore = useMessageManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    messageid: ''
  }
})

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await messageManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data

  state.tableLoading = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

onMounted(() => {
  handleQuery({initPageIndex: true})
})
</script>
